<script setup>
import { onMounted, ref, onUnmounted } from 'vue'
import LetterNav from './LetterNav.vue'

const isScrolled = ref(false)
const handleScroll = () => {
  isScrolled.value = window.scrollY > 50 // 当滚动超过50px时触发
}

defineProps({
  // 导航项
  navItem: {
    type: Array,
    default() {
      return [{ href: '/letter/', title: '返回首页' }]
    }
  }
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})
</script>

<template>
  <letter-nav
    class="nav"
    :class="{ 'nav-scrolled': isScrolled }"
    :navItem="navItem"
  ></letter-nav>
  <div class="shadow" :class="{ 'shadow-scrolled': isScrolled }"></div>
</template>
<style scoped>
.nav {
  position: sticky;
  top: 0;
  z-index: 99;
  transition: box-shadow 0.3s ease;
}

.nav-scrolled {
  z-index: 99;
  box-shadow: 0 0px 3px 2px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.shadow {
  position: fixed;
  top: 86px; /* 与nav的高度相匹配 */
  left: 0;
  right: 0;
  height: 10px; /* 阴影的高度 */
  background: transparent;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  opacity: 0;
  transform: translateY(10px); /* 初始时隐藏阴影 */
  pointer-events: none; /* 确保阴影不会干扰滚动或点击事件 */
}
.shadow-scrolled {
  opacity: 1;
  transform: translateY(0); /* 滚动时显示阴影 */
}
</style>
